<script setup lang="ts">
import { ref } from 'vue'

import { ArrangementCalc, CombinationCalc } from "../../wailsjs/go/main/App";

const an = ref('')
const am = ref('')
const aRes = ref('')
const cn = ref('')
const cm = ref('')
const cRes = ref('')


async function calcA() {
  const res = await ArrangementCalc(parseInt(an.value.trim()), parseInt(am.value.trim()))
  aRes.value = `${res}`
}

async function calcC() {
  cRes.value = `${await CombinationCalc(parseInt(cn.value.trim()), parseInt(cm.value.trim()))}`
}
</script>

<template>
  <div text="center" class="flex flex-col justify-center items-center">
    <div class="flex items-center">
      <div m-2>A</div>
      <div w="150px">
        <el-input v-model="an"  placeholder="n" />
        <el-input v-model="am"  placeholder="m" />
      </div>
      <el-button @click="calcA" class="m-2"> = </el-button>
      <p>{{aRes}}</p>
    </div>
    <div class="flex items-center">
      <div m-2>C</div>
      <div w="150px">
        <el-input v-model="cn"  placeholder="n" />
        <el-input v-model="cm"  placeholder="m" />
      </div>
      <el-button @click="calcC" m-2> = </el-button>
      <p>{{cRes}}</p>
    </div>
  </div>
</template>
